<template>
    <div class="geo-location">
        <input type="search" name="" id="" v-model="city" placeholder="请输入城市名称" @change="getData()">
    </div>
</template>

<script>
import axios from 'axios';
import { API_CITY, KEY } from '@/common/constrant';
// import { mapMutations } from 'vuex';
import { mapActions } from 'vuex';
export default {
    data() {
        return {
            "city": ""
        };
    },
    methods: {
        // ...mapMutations([
        //     "updateLocationMutation"
        // ]),
        ...mapActions([
            "updateLocationAction"
        ]),
        getData() {
            axios.get(API_CITY, {
                params: {
                    location: this.city,
                    key: KEY
                }
            }).then(res => {
                console.log(res.data);
                //使用mapActions辅助函数，将‘this.incremnt()’映射为‘this.$store.dispatch('increment')’
                this.updateLocationAction(res.data.location[0])
                //通过dispatch来修改状态的state
                // this.$store.dispatch("updateLocationAction",res.data.location[0])
                //此方法是越过了action直接从vue component组件commit提交mutation
                // this.updateLocationMutation(res.data.location[0])
                console.log(this.$store.state.location)
            })
        }
    },
    //     mounted() {
    //     this.getData();
    //     }
}

</script>
<style scoped></style>